<template>
  <div class="cardlist">
    <el-card
      v-for="(item, index) in orderList"
      :key="index"
      class="card"
      @click="redirectToPage(item.id)"
    >
      <div class="top">
        <div class="time">
          <div class="title">{{ item.title }}</div>
          <div class="date">{{ item.date }}</div>
        </div>
        <div class="price">{{ item.price + "¥" }}</div>
      </div>
      <div class="duration">{{ item.duration }}</div>
      <div class="content">
        <p class="info">{{ item.description }}</p>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <div class="owner">
          <el-avatar class="avatar" :src="getUserAvatar(item.customer_id)" />
          <div class="ownerId">ID:{{ item.customer_id }}</div>
        </div>
        <div class="type">{{ item.type }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: null,
      user_data: [],
      selectTypes: "所有",
      searchInput: "",
    };
  },
  mounted() {
    this.Requst();
    this.requestAvatar();
  },
  methods: {
    redirectToPage() {
      this.$router.push("/UserPage"); //改
    },
    Requst() {
      const params = new URLSearchParams();
      params.append("select", this.selectTypes);
      params.append("search", this.searchInput);
      this.axios.post("http://127.0.0.1:8000/order/", params).then((res) => {
        this.orderList = JSON.parse(res.data);
      });
    },
    requestAvatar() {
      this.axios.post("http://127.0.0.1:8000/userInfos/").then((res) => {
        if (res.data.success) {
          this.user_data = res.data.data;
        }
      });
    },
    getUserAvatar(customer_id) {
      for (let item of this.user_data) {
        if (item.id == customer_id) {
          return item.avatar;
        }
      }
    },
  },
};
</script>

<style scoped>
.card {
  width: 60%;
  margin: 20px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  margin-left: 20%;
}

.el-card {
  --el-card-padding: none;
}

.card:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
  /* 鼠标悬停时阴影加深 */
  cursor: pointer;
  /* 鼠标变为手型指示链接 */
}

.owner {
  display: flex;
  justify-content: space-between;
}

.top {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
}

.duration {
  padding: 25px;
  padding-bottom: 0;
  padding-top: 0;
  display: flex;
  justify-content: right;
  color: gray;
}

.time {
  display: flex;
}

.date {
  padding-left: 5px;
  padding-top: 5px;
  color: gray;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.info {
  margin-top: 0;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: rgb(255, 0, 0);
}

.divider {
  height: 2px;
  background-color: #f0f0f0;
}

.bottom {
  background: linear-gradient(to right, #cdd2e8, #ffffff);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  color: gray;
}

.content {
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
  color: #504b4b;
}

.ownerId,
.type {
  padding: 8px;
}
</style>
